<template>
  <div>
    <el-card>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>订单查询</el-breadcrumb-item>
      </el-breadcrumb>
      <h1>订单查询</h1>
    </el-card>
    <el-card>
      <el-form
        :model="aueryFormData"
        label-width="80px"
        class="top"
        ref="aueryFormData"
      >
        <el-row>
          <!-- 订单类型 -->
          <el-col :span="11" :offset="1"
            ><el-form-item label="订单类型" prop="orderTypeData">
              <el-select
                v-model="aueryFormData.orderTypeData"
                placeholder="请选择订单类型"
                style="width: 400px"
              >
                <el-option label="普通订单" value="1"></el-option>
                <el-option label="代发订单" value="2"></el-option>
                <el-option label="拼图订单" value="3"></el-option>
                <el-option label="积分兑现订单" value="4"></el-option>
              </el-select> </el-form-item
          ></el-col>
          <!-- 订单状态 -->
          <el-col :span="11"
            ><el-form-item label="订单状态" prop="stateData">
              <el-select
                v-model="aueryFormData.stateData"
                placeholder="请选择订单状态"
                style="width: 400px"
              >
                <el-option label="已付款" value="已付款"></el-option>
                <el-option label="待付款" value="待付款"></el-option>
                <el-option label="待发货" value="待发货"></el-option>
                <el-option label="已发货" value="已发货"></el-option>
                <el-option label="已完成" value="已完成"></el-option>
                <el-option label="已关闭" value="已关闭"></el-option>
                <el-option label="售后中" value="售后中"></el-option>
              </el-select> </el-form-item
          ></el-col>
          <!-- 统计日期 -->
          <el-col :span="11" :offset="1">
            <el-form-item label="统计日期" prop="time">
              <div class="block">
                <el-date-picker
                  v-model="aueryFormData.time"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </div>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="7">
            <el-row>
              <el-col :span="5">
                <span>今天</span>
              </el-col>
              <el-col :span="5">
                <span>明天</span>
              </el-col>
              <el-col :span="5">
                <span>最近7天</span>
              </el-col>
              <el-col :span="9">
                <span>最近30天</span>
              </el-col>
            </el-row>
          </el-col> -->
          <!-- <el-col v-show="isShow">
            配送方式
            <el-col :span="11" :offset="1"
              ><el-form-item label="配送方式" prop="distributionDate">
                <el-select
                  v-model="aueryFormData.distributionDate"
                  placeholder="请选择配送方式"
                  style="width: 400px"
                >
                  <el-option
                    label="全部"
                    value="allDeliveryMethods"
                  ></el-option>
                  <el-option
                    label="快递发货"
                    value="courierDelivery"
                  ></el-option>
                  <el-option label="上门自提" value="afhalen"></el-option>
                </el-select> </el-form-item
            ></el-col>
            付款方式
            <el-col :span="11"
              ><el-form-item label="付款方式" prop="paymentMethod">
                <el-select
                  v-model="aueryFormData.paymentMethod"
                  placeholder="请选择付款方式"
                  style="width: 400px"
                >
                  <el-option label="全部" value="fullPaymentMethod"></el-option>
                  <el-option label="微信支付" value="weChatPay"></el-option>
                  <el-option label="支付宝支付" value="alipayPay"></el-option>
                  <el-option
                    label="储蓄卡支付"
                    value="debitCardPayment"
                  ></el-option>
                  <el-option
                    label="银行卡支付"
                    value="bankCardPayment"
                  ></el-option>
                </el-select> </el-form-item
            ></el-col>
            精确查询
            <el-col :span="18" :offset="1">
              <el-row>
                <el-col :span="4">
                  <el-form-item label="精确查询" prop="refinedQuery">
                    <el-select
                      v-model="aueryFormData.refinedQuery"
                      style="width: 150px"
                    >
                      <el-option
                        label="订单编号"
                        value="orderNumber"
                      ></el-option>
                      <el-option
                        label="商品名称"
                        value="productName"
                      ></el-option>
                      <el-option
                        label="商品编码"
                        value="productCode"
                      ></el-option>
                      <el-option
                        label="会员名称"
                        value="memberName"
                      ></el-option>
                      <el-option
                        label="会员手机号"
                        value="memberPhone"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item prop="refinedQueryContext">
                    <el-input
                      v-model="aueryFormData.refinedQueryContext"
                      placeholder="请输入内容"
                      style="width: 400px; margin-left: 8px"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
               </el-col>
            </el-col> -->
          <el-col :span="5" style="text-align: end">
            <el-button type="primary" @click="queryList">查看</el-button>
            <el-button @click="resetForm('aueryFormData')">重置</el-button>
            <!-- <el-button style="border: none" @click="taggle"
              >{{ isShow ? "收起" : "展开" }}
              <i
                :class="isShow ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
              ></i>
            </el-button> -->
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form label-width="80px" :model="sizeForm">
        <el-form-item label="订单编号:" v-model="sizeForm.id">
          <p>{{ sizeForm.id }}</p>
        </el-form-item>
        <el-form-item label="下单时间:" v-model="sizeForm.created">
          <p>{{ sizeForm.created }}</p>
        </el-form-item>
        <el-form-item label="支付时间:" v-model="sizeForm.payCreated">
          <p>{{ sizeForm.payCreated }}</p>
        </el-form-item>
        <el-form-item label="发货方式:" prop="resource">
          <el-radio-group v-model="sizeForm.resource">
            <el-radio label="物流发货"></el-radio>
            <el-radio label="无需物流"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="快递公司:" prop="region">
          <el-select placeholder="请输入物流公司" v-model="sizeForm.region">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="快递单号:" prop="courierNumber">
          <el-input v-model="sizeForm.courierNumber"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-card class="bottom">
      <div class="bottom-top">
        <p>订单列表</p>
        <!-- <el-button>批量操作</el-button> -->
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部订单" name="first">
          <div class="con-head">
            <div><span>商品信息</span></div>
            <div><span>会员信息</span></div>
            <div>
              <div><span>订单来源</span></div>
              <div><span>收货方式</span></div>
              <div><span>订单状态</span></div>
            </div>
            <div><span>操作</span></div>
          </div>
          <div v-for="item in $store.state.order.list" :key="item.id">
            <div class="con-head con-content">
              <div>订单编号：{{ item.num }}</div>
              <div>下单时间：{{ item.created | formatDate }}</div>
              <div>{{ item.payWay }}</div>
              <div>共{{ item.quantity }}件，合计：{{ item.total }}元</div>
            </div>
            <div class="con-head con-foot">
              <div>
                <p><img :src="item.orderSrc" alt="" /></p>
                <ul>
                  <li class="blue">
                    <span>{{ item.name }}</span
                    >&nbsp;
                    <!-- <span>{{ item.orderColor }}</span> -->
                  </li>
                  <li>
                    <span>单价：{{ item.price }}</span
                    >&nbsp;<span>数量：{{ item.num }}</span>
                  </li>
                </ul>
              </div>
              <div>
                <p><img :src="item.userSrc" alt="" /></p>
                <ul>
                  <li class="blue">
                    <span>{{ item.consignee }}</span>
                  </li>
                  <li>
                    <span>{{ item.consigneePhone }}</span>
                  </li>
                </ul>
              </div>
              <div>
                <div>
                  <span>{{ item.soucre }}</span>
                </div>
                <div>
                  <span>{{ item.deliver }}</span>
                </div>
                <div>
                  <span>{{ item.status }}</span>
                </div>
              </div>
              <div class="operation">
                <span
                  @click="sendOrder(item)"
                  v-if="item.status == '待发货' ? true : false"
                  >去发货</span
                >
                <span @click="orderList(item.id, item.status)">订单详细</span>
                <span @click="delOrder(item.id)">删除</span>
              </div>
            </div>
          </div>
          <div>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="$store.state.order.page"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="$store.state.order.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="$store.state.order.count"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="待付款" name="second">
          <div class="con-head">
            <div><span>商品信息</span></div>
            <div><span>会员信息</span></div>
            <div>
              <div><span>订单来源</span></div>
              <div><span>收货方式</span></div>
              <div><span>订单状态</span></div>
            </div>
            <div><span>操作</span></div>
          </div>
          <div v-for="item in paymentList" :key="item.id">
            <div class="con-head con-content">
              <div>订单编号：{{ item.num }}</div>
              <div>下单时间：{{ item.created | formatDate }}</div>
              <div>{{ item.payWay }}</div>
              <div>共{{ item.quantity }}件，合计：{{ item.total }}元</div>
            </div>
            <div class="con-head con-foot">
              <div>
                <p><img :src="item.orderSrc" alt="" /></p>
                <ul>
                  <li class="blue">
                    <span>{{ item.name }}</span
                    >&nbsp;
                    <!-- <span>{{ item.orderColor }}</span> -->
                  </li>
                  <li>
                    <span>单价：{{ item.price }}</span
                    >&nbsp;<span>数量：{{ item.num }}</span>
                  </li>
                </ul>
              </div>
              <div>
                <p><img :src="item.userSrc" alt="" /></p>
                <ul>
                  <li class="blue">
                    <span>{{ item.consignee }}</span>
                  </li>
                  <li>
                    <span>{{ item.consigneePhone }}</span>
                  </li>
                </ul>
              </div>
              <div>
                <div>
                  <span>{{ item.soucre }}</span>
                </div>
                <div>
                  <span>{{ item.deliver }}</span>
                </div>
                <div>
                  <span>{{ item.status }}</span>
                </div>
              </div>
              <div class="operation">
                <!-- <span @click="dialogVisible = true">去发货</span> -->
                <!-- <span>订单详细</span> -->
                <span @click="orderList(item.id, item.status)">订单详细</span>
                <span @click="delOrder(item.id)">删除</span>
              </div>
            </div>
          </div>
          <div>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="count"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="待发货" name="third">
          <div class="con-head">
            <div><span>商品信息</span></div>
            <div><span>会员信息</span></div>
            <div>
              <div><span>订单来源</span></div>
              <div><span>收货方式</span></div>
              <div><span>订单状态</span></div>
            </div>
            <div><span>操作</span></div>
          </div>
          <div v-for="item in sendList" :key="item.id">
            <div class="con-head con-content">
              <div>订单编号：{{ item.num }}</div>
              <div>下单时间：{{ item.created | formatDate }}</div>
              <div>{{ item.payWay }}</div>
              <div>共{{ item.quantity }}件，合计：{{ item.total }}元</div>
            </div>
            <div class="con-head con-foot">
              <div>
                <p><img :src="item.orderSrc" alt="" /></p>
                <ul>
                  <li class="blue">
                    <span>{{ item.name }}</span
                    >&nbsp;
                    <!-- <span>{{ item.orderColor }}</span> -->
                  </li>
                  <li>
                    <span>单价：{{ item.price }}</span
                    >&nbsp;<span>数量：{{ item.num }}</span>
                  </li>
                </ul>
              </div>
              <div>
                <p><img :src="item.userSrc" alt="" /></p>
                <ul>
                  <li class="blue">
                    <span>{{ item.consignee }}</span>
                  </li>
                  <li>
                    <span>{{ item.consigneePhone }}</span>
                  </li>
                </ul>
              </div>
              <div>
                <div>
                  <span>{{ item.soucre }}</span>
                </div>
                <div>
                  <span>{{ item.deliver }}</span>
                </div>
                <div>
                  <span>{{ item.status }}</span>
                </div>
              </div>
              <div class="operation">
                <!-- <span>订单详细</span> -->
                <span @click="orderList(item.id, item.status)">订单详细</span>
                <span @click="delOrder(item.id)">删除</span>
              </div>
            </div>
          </div>
          <div>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="count"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已发货" name="fourth">
          <div class="con-head">
            <div><span>商品信息</span></div>
            <div><span>会员信息</span></div>
            <div>
              <div><span>订单来源</span></div>
              <div><span>收货方式</span></div>
              <div><span>订单状态</span></div>
            </div>
            <div><span>操作</span></div>
          </div>
          <div v-for="item in deliveredList" :key="item.id">
            <div class="con-head con-content">
              <div>订单编号：{{ item.num }}</div>
              <div>下单时间：{{ item.created | formatDate }}</div>
              <div>{{ item.payWay }}</div>
              <div>共{{ item.quantity }}件，合计：{{ item.total }}元</div>
            </div>
            <div class="con-head con-foot">
              <div>
                <p><img :src="item.orderSrc" alt="" /></p>
                <ul>
                  <li class="blue">
                    <span>{{ item.name }}</span
                    >&nbsp;
                    <!-- <span>{{ item.orderColor }}</span> -->
                  </li>
                  <li>
                    <span>单价：{{ item.price }}</span
                    >&nbsp;<span>数量：{{ item.num }}</span>
                  </li>
                </ul>
              </div>
              <div>
                <p><img :src="item.userSrc" alt="" /></p>
                <ul>
                  <li class="blue">
                    <span>{{ item.consignee }}</span>
                  </li>
                  <li>
                    <span>{{ item.consigneePhone }}</span>
                  </li>
                </ul>
              </div>
              <div>
                <div>
                  <span>{{ item.soucre }}</span>
                </div>
                <div>
                  <span>{{ item.deliver }}</span>
                </div>
                <div>
                  <span>{{ item.status }}</span>
                </div>
              </div>
              <div class="operation">
                <!-- <span @click="dialogVisible = true">去发货</span> -->
                <!-- <span>订单详细</span> -->
                <span @click="orderList(item.id, item.status)">订单详细</span>
                <span @click="delOrder(item.id)">删除</span>
              </div>
            </div>
          </div>
          <div>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="count"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已完成" name="five">
          <div class="con-head">
            <div><span>商品信息</span></div>
            <div><span>会员信息</span></div>
            <div>
              <div><span>订单来源</span></div>
              <div><span>收货方式</span></div>
              <div><span>订单状态</span></div>
            </div>
            <div><span>操作</span></div>
          </div>
          <div v-for="item in completedList" :key="item.id">
            <div class="con-head con-content">
              <div>订单编号：{{ item.num }}</div>
              <div v-if="item.cteated == '' ? false : true">
                下单时间：{{ item.created | formatDate }}
              </div>
              <div>{{ item.payWay }}</div>
              <div>共{{ item.quantity }}件，合计：{{ item.total }}元</div>
            </div>
            <div class="con-head con-foot">
              <div>
                <p><img :src="item.orderSrc" alt="" /></p>
                <ul>
                  <li class="blue">
                    <span>{{ item.name }}</span
                    >&nbsp;
                    <!-- <span>{{ item.orderColor }}</span> -->
                  </li>
                  <li>
                    <span>单价：{{ item.price }}</span
                    >&nbsp;<span>数量：{{ item.num }}</span>
                  </li>
                </ul>
              </div>
              <div>
                <p><img :src="item.userSrc" alt="" /></p>
                <ul>
                  <li class="blue">
                    <span>{{ item.consignee }}</span>
                  </li>
                  <li>
                    <span>{{ item.consigneePhone }}</span>
                  </li>
                </ul>
              </div>
              <div>
                <div>
                  <span>{{ item.soucre }}</span>
                </div>
                <div>
                  <span>{{ item.deliver }}</span>
                </div>
                <div>
                  <span>{{ item.status }}</span>
                </div>
              </div>
              <div class="operation">
                <!-- <span @click="dialogVisible = true">去发货</span> -->
                <!-- <span>订单详细</span> -->
                <span @click="orderList(item.id, item.status)">订单详细</span>
                <span @click="delOrder(item.id)">删除</span>
              </div>
            </div>
          </div>
          <div>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="count"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已关闭" name="fix">
          <div class="con-head">
            <div><span>商品信息</span></div>
            <div><span>会员信息</span></div>
            <div>
              <div><span>订单来源</span></div>
              <div><span>收货方式</span></div>
              <div><span>订单状态</span></div>
            </div>
            <div><span>操作</span></div>
          </div>
          <div v-for="item in closedList" :key="item.id">
            <div class="con-head con-content">
              <div>订单编号：{{ item.num }}</div>
              <div>下单时间：{{ item.created | formatDate }}</div>
              <div>{{ item.payWay }}</div>
              <div>共{{ item.quantity }}件，合计：{{ item.total }}元</div>
            </div>
            <div class="con-head con-foot">
              <div>
                <p><img :src="item.orderSrc" alt="" /></p>
                <ul>
                  <li class="blue">
                    <span>{{ item.name }}</span
                    >&nbsp;
                    <!-- <span>{{ item.orderColor }}</span> -->
                  </li>
                  <li>
                    <span>单价：{{ item.price }}</span
                    >&nbsp;<span>数量：{{ item.num }}</span>
                  </li>
                </ul>
              </div>
              <div>
                <p><img :src="item.userSrc" alt="" /></p>
                <ul>
                  <li class="blue">
                    <span>{{ item.consignee }}</span>
                  </li>
                  <li>
                    <span>{{ item.consigneePhone }}</span>
                  </li>
                </ul>
              </div>
              <div>
                <div>
                  <span>{{ item.soucre }}</span>
                </div>
                <div>
                  <span>{{ item.deliver }}</span>
                </div>
                <div>
                  <span>{{ item.status }}</span>
                </div>
              </div>
              <div class="operation">
                <!-- <span @click="dialogVisible = true">去发货</span> -->
                <!-- <span>订单详细</span> -->
                <span @click="orderList(item.id, item.status)">订单详细</span>
                <span @click="delOrder(item.id)">删除</span>
              </div>
            </div>
          </div>
          <div>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="count"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="售后中" name="eight">
          <div class="con-head">
            <div><span>商品信息</span></div>
            <div><span>会员信息</span></div>
            <div>
              <div><span>订单来源</span></div>
              <div><span>收货方式</span></div>
              <div><span>订单状态</span></div>
            </div>
            <div><span>操作</span></div>
          </div>
          <div v-for="item in afterSaleList" :key="item.id">
            <div class="con-head con-content">
              <div>订单编号：{{ item.num }}</div>
              <div>下单时间：{{ item.created | formatDate }}</div>
              <div>{{ item.payWay }}</div>
              <div>共{{ item.quantity }}件，合计：{{ item.total }}元</div>
            </div>
            <div class="con-head con-foot">
              <div>
                <p><img :src="item.orderSrc" alt="" /></p>
                <ul>
                  <li class="blue">
                    <span>{{ item.name }}</span
                    >&nbsp;
                    <!-- <span>{{ item.orderColor }}</span> -->
                  </li>
                  <li>
                    <span>单价：{{ item.price }}</span
                    >&nbsp;<span>数量：{{ item.num }}</span>
                  </li>
                </ul>
              </div>
              <div>
                <p><img :src="item.userSrc" alt="" /></p>
                <ul>
                  <li class="blue">
                    <span>{{ item.consignee }}</span>
                  </li>
                  <li>
                    <span>{{ item.consigneePhone }}</span>
                  </li>
                </ul>
              </div>
              <div>
                <div>
                  <span>{{ item.soucre }}</span>
                </div>
                <div>
                  <span>{{ item.deliver }}</span>
                </div>
                <div>
                  <span>{{ item.status }}</span>
                </div>
              </div>
              <div class="operation">
                <!-- <span @click="dialogVisible = true">去发货</span> -->
                <!-- <span>订单详细</span> -->
                <span @click="orderList(item.id, item.status)">订单详细</span>
                <span @click="delOrder(item.id)">删除</span>
              </div>
            </div>
          </div>
          <div>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="count"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import { formatDate } from "../../utils/formatDate.js";
import { formatDate1 } from "../../utils/formatDate1.js";
export default {
  data: function () {
    return {
      pickerOptions: {
        disabledDate(time) {
          //根据当前日期 --- 禁止选中之后的日期
          return time.getTime() > Date.now();
        },
      },
      aueryFormData: {
        // 订单类型
        orderTypeData: "",
        // 订单状态
        stateData: "",
        //时间
        time: "",
        // 配送方式
        // distributionDate: "",
        // 付款方式
        // paymentMethod: "",
        //精确查询方式
        // refinedQuery: "订单查询",
        //精确查询内容
        // refinedQueryContext: "",
      },

      //显示隐藏
      // isShow: true,
      //tab切换
      activeName: "first",
      // 弹出框显示隐藏
      dialogVisible: false,
      //弹框数据
      sizeForm: {
        id: 2020202002202201,
        created: "2019-09-09 10:41",
        payCreated: "2019-09-09 10:40",
        resource: "",
        region: "",
        courierNumber: "",
      },
      //待付款
      paymentList: [],
      count: 0,
      page: 1,
      size: 5,
      //待发货
      sendList: [],
      //已发货
      deliveredList: [],
      //已完成
      completedList: [],
      //已关闭
      closedList: [],
      //售后中
      afterSaleList: [],
      //查询列表
      queryForm: [],
    };
  },
  methods: {
    //展开，收起
    // taggle() {
    //   this.isShow = !this.isShow;
    // },
    //tab切换
    handleClick(tab, event) {
      console.log(tab.name);
      if (tab.name == "first") {
        this.$store.dispatch("getOrder");
      }
      if (tab.name == "second") {
        this.$axios({
          url: "/vip/orders/find",
          method: "get",
          params: { status: "待付款", page: this.page, limit: this.size },
        }).then((res) => {
          console.log(res.data.data);
          this.count = res.data.count;
          this.paymentList = res.data.data;
        });
      }
      if (tab.name == "third") {
        this.$axios({
          url: "/vip/orders/find",
          method: "get",
          params: { status: "待发货", page: this.page, limit: this.size },
        }).then((res) => {
          console.log(res.data.data);
          this.count = res.data.count;
          this.sendList = res.data.data;
        });
      }
      if (tab.name == "fourth") {
        this.$axios({
          url: "/vip/orders/find",
          method: "get",
          params: { status: "已发货", page: this.page, limit: this.size },
        }).then((res) => {
          console.log(res.data.data);
          this.count = res.data.count;
          this.deliveredList = res.data.data;
        });
      }
      if (tab.name == "five") {
        this.$axios({
          url: "/vip/orders/find",
          method: "get",
          params: { status: "已完成", page: this.page, limit: this.size },
        }).then((res) => {
          console.log(res.data.data);
          this.count = res.data.count;
          this.completedList = res.data.data;
        });
      }
      if (tab.name == "fix") {
        this.$axios({
          url: "/vip/orders/find",
          method: "get",
          params: { status: "已关闭", page: this.page, limit: this.size },
        }).then((res) => {
          console.log(res.data.data);
          this.count = res.data.count;
          this.closedList = res.data.data;
        });
      }
      if (tab.name == "eight") {
        this.$axios({
          url: "/vip/orders/find",
          method: "get",
          params: { status: "售后中", page: this.page, limit: this.size },
        }).then((res) => {
          console.log(res.data.data);
          this.count = res.data.count;
          this.afterSaleList = res.data.data;
        });
      }
    },
    //发货弹框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleSizeChange(val) {
      this.$store.commit("updateSize", val);
      this.$store.dispatch("getOrder");
    },
    handleCurrentChange(val) {
      this.$store.commit("updatePage", val);
      this.$store.dispatch("getOrder");
    },
    // 删除订单
    delOrder(e) {
      this.$store.dispatch("delOrderList", e);
    },
    async queryList() {
      const { data: res } = await this.$axios.get("/vip/orders/find", {
        params: {
          type: this.aueryFormData.orderTypeData,
          status: this.aueryFormData.stateData,
          page: "1",
          limit: "5",
          startTime: this.formatDateTime(this.aueryFormData.time[0]),
          endTime: this.formatDateTime(this.aueryFormData.time[1]),
        },
      });
      // console.log(res.data);
      this.$store.commit("initList", res.data);
      this.$store.commit("initCount", res.count);
    },
    addZero(num) {
      return num < 10 ? "0" + num : num;
    },
    formatDateTime(date) {
      const time = new Date(Date.parse(date));
      time.setTime(time.setHours(time.getHours() + 8));
      const Y = time.getFullYear() + "-";
      const M = this.addZero(time.getMonth() + 1) + "-";
      const D = this.addZero(time.getDate()) + "";
      return Y + M + D;
    },
    sendOrder(item) {
      // console.log(item);
      this.dialogVisible = true;
    },
    orderList(id, status) {
      console.log(id, status);
      this.$router.push({
        path: "/home/orderDetails",
        query: { id: id, status: status },
      });
    },
  },
  filters: {
    formatDate(time) {
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm");
    },
    formatDate1(time) {
      let data = new Date(time);
      return formatDate1(data, "yyyy-MM-dd");
    },
  },
  created() {
    this.$store.dispatch("getOrder");
  },
};
</script>
<style scoped lang="less">
.el-card:last-child {
  margin-top: 20px;
}
.top > .el-row > .el-col > .el-row {
  .el-col {
    text-align: center;
    height: 51px;
    line-height: 33px;
  }
}
.bottom {
  .bottom-top {
    display: flex;
    justify-content: space-between;
  }
  .con-head {
    display: flex;
    > div {
      width: 25%;
      height: 60px;
      background: #eee;
      line-height: 60px;
      padding-left: 8px;
      display: flex;
      justify-content: center;
      > div {
        margin-right: 25px;
      }
    }
  }
  .con-content {
    margin-top: 20px;
    div {
      width: 25%;
    }
  }
  .con-foot {
    p {
      height: 60px;
      line-height: 60px;
    }
    .blue {
      color: #1890ff;
    }
    > div {
      display: flex;
      justify-content: center;
      > div {
        margin-right: 25px;
      }
    }
    img {
      width: 40px;
      height: 40px;
      margin-top: 10px;
      margin-right: 10px;
    }
    li {
      width: 100%;
      height: 30px;
      line-height: 30px;
      list-style: none;
    }
    > div {
      background: #fff;
      border-right: 1px solid #eee;
      border-bottom: 1px solid #eee;
    }
    .operation {
      color: #1890ff;
      cursor: pointer;
      text-align: center;
      span {
        padding-right: 25px;
      }
    }
  }
}
</style>
<style lang="less">
.el-dialog__header {
  border-bottom: 1px solid #e8eaec;
}
.el-dialog .el-form-item {
  margin-bottom: 10px;
}
.el-dialog__body {
  padding: 20px 20px;
}
</style>